<template>
  <div class="cao">
    <!-- 工具栏和搜索栏 -->.

    <!--  判断当前角色是领导或人事    -->
    <el-form v-show="name == 'rs'">
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="openAddDialog"
        >新增
        </el-button
        >
        <el-button
          type="warning"
          icon="el-icon-s-promotion"
          @click="Export()"
        >导出
        </el-button
        >
      </el-form-item>
    </el-form>

    <!-- 数据展示栏 -->
    <el-table v-loading="loading" :data="InfoList" id="table_excel">
      <el-table-column label="姓名" align="center" prop="name" width="70px"/>
      <el-table-column label="性别" align="center" prop="sex" width="50px"/>
      <el-table-column label="年龄" align="center" prop="age" width="50px"/>
      <el-table-column label="住址" align="center" prop="address" width="150px"></el-table-column>
      <el-table-column label="面试岗位" align="center" prop="post" width="120px"/>
      <el-table-column label="面试时间" align="center" prop="time" width="170px"/>
      <el-table-column label="描述" align="center" prop="description" width="270px"/>
      <el-table-column label="建议薪资" align="center" prop="suggestSalary" width="80px"/>
      <el-table-column label="审批状态" align="center" prop="state" width="80px">
        <template slot-scope="scope">
          <!--      tag判断状态来展示不同样式,span显示不同值    -->
          <el-tag effect="plain"
                  :type="scope.row.state == '0' ? '':scope.row.state == '1' ? 'warning':scope.row.state == '2' ? 'success':scope.row.state == '3' ? 'danger':''"
          >
            <span>{{
                scope.row.state == '0' ? '人事编写' : scope.row.state == '1' ? '领导审批' : scope.row.state == '2' ? '通过' : scope.row.state == '3' ? '未通过' : ''
              }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!--      查看和修改共用一个面板和按钮,根据当前行面试信息的审批状态不同展示不同    -->
          <el-button
            size="mini"
            type="warning" plain
            icon="el-icon-edit"
            @click="handleCaozuo(scope.row)"
          >{{ scope.row.state == 1 ? '查看' : '修改' }}
          </el-button>
          <!--    如果是领导不显示删除按钮      -->
          <el-button
            size="mini"
            type="danger" plain
            icon="el-icon-circle-close"
            v-show="name == 'rs'"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--添加 的对话框-->
    <el-dialog :title="dialogName" :visible.sync="addOrEditDialog" width="50%" center :show-close="false">
      <el-form :model="infos" ref="addOrEditForm">
        <el-form-item>
          <el-col :span="12">
            <el-form-item label="姓名" label-width="80px">
              <el-input
                v-model="infos.name"
                autocomplete="off"
                style="width: 150px"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-select v-model="infos.sex" style="width: 150px;" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-col :span="12">
            <el-form-item label="年龄" label-width="80px">
              <el-input
                v-model="infos.age"
                autocomplete="off"
                style="width: 150px"
                placeholder="请输入年龄"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="住址">
              <el-input
                v-model="infos.address"
                autocomplete="off"
                style="width: 150px"
                placeholder="请输入住址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-col :span="12">
            <el-form-item label="面试岗位">
              <el-select v-model="infos.post" style="width: 135px;" placeholder="请选择岗位">
                <el-option label="开发部" value="开发部"></el-option>
                <el-option label="研发部" value="研发部"></el-option>
                <el-option label="测试部" value="测试部"></el-option>
                <el-option label="运维部" value="运维部"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="面试日期">
              <el-date-picker
                v-model="infos.time"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="描述">
          <el-input
            v-model="infos.description"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="建议薪资">
          <el-input
            v-model="infos.suggestSalary"
            autocomplete="off"
            style="width: 86%"
            placeholder="请输入薪资"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddMeasure('addOrEditForm')">取 消</el-button>
        <el-button @click="saveAddMeasure()">保存</el-button>
        <el-button type="primary" @click="submitMeasure()"
        >提交
        </el-button
        >
      </div>
    </el-dialog>

    <!--修改和查看 的对话框-->
    <el-dialog :title="dialogName" :visible.sync="EditOrLookDialog" width="50%" center :show-close="false">
      <el-form :model="infos" ref="EditOrLookForm">
        <el-form-item>
          <el-col :span="12">
            <el-form-item label="姓名" label-width="80px">
              <!--      如果当前行数据状态是领导审批这些功能都禁用        -->
              <el-input
                v-model="infos.name"
                autocomplete="off"
                style="width: 150px"
                placeholder="请输入名称"
                :disabled="infos.state == 1"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-select v-model="infos.sex" style="width: 150px;" placeholder="请选择性别"
                         :disabled="infos.state == 1"
              >
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-col :span="12">
            <el-form-item label="年龄" label-width="80px">
              <el-input
                v-model="infos.age"
                autocomplete="off"
                style="width: 150px"
                placeholder="请输入年龄"
                :disabled="infos.state == 1"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="住址">
              <el-input
                v-model="infos.address"
                autocomplete="off"
                style="width: 150px"
                placeholder="请输入住址"
                :disabled="infos.state == 1"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-col :span="12">
            <el-form-item label="面试岗位">
              <el-select v-model="infos.post" style="width: 135px;" placeholder="请选择岗位"
                         :disabled="infos.state == 1"
              >
                <el-option label="开发部" value="开发部"></el-option>
                <el-option label="研发部" value="研发部"></el-option>
                <el-option label="测试部" value="测试部"></el-option>
                <el-option label="运维部" value="运维部"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="面试日期">
              <el-date-picker
                v-model="infos.time"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled="infos.state == 1"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="描述">
          <el-input
            v-model="infos.description"
            autocomplete="off"
            style="width: 90%"
            placeholder="请输入描述"
            :disabled="infos.state == 1"
          ></el-input>
        </el-form-item>
        <el-form-item label="建议薪资">
          <el-input
            v-model="infos.suggestSalary"
            autocomplete="off"
            style="width: 86%"
            placeholder="请输入薪资"
            :disabled="infos.state == 1"
          ></el-input>
        </el-form-item>

        <!--     如果当前行的信息是领导审批状态就显示意见和薪资,如果身份不是领导禁用   -->
        <el-form-item v-show="infos.state == 1">
          <el-col :span="12">
            <el-form-item label="领导意见" label-width="80px">
              <el-input
                v-model="infos.opinion"
                autocomplete="off"
                style="width: 150px"
                placeholder="请输入意见"
                :disabled="name == 'rs'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="薪资">
              <el-input
                v-model="infos.salary"
                autocomplete="off"
                style="width: 150px"
                placeholder="请输入薪资"
                :disabled="name == 'rs'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <!--  这里对话框的操作按钮用了4个,需要的时候显示或允许使用,不需要的时候禁用或隐藏    -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddMeasure('EditOrLookForm')">取 消</el-button>
        <el-button @click="saveAddMeasure2()" v-show="name == 'admin'">通过</el-button>
        <el-button @click="saveAddMeasure3()" v-show="name == 'rs'" :disabled="infos.state == 1">保存</el-button>
        <el-button type="primary" @click="submitMeasure2()" v-show="name == 'admin'">不通过</el-button>
        <el-button type="primary" @click="submitMeasure3()" v-show="name == 'rs'" :disabled="infos.state == 1">提交
        </el-button>
      </div>
    </el-dialog>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getInfo, addInfo, delInfo, updateInfo } from '@/api/interview'
import { mapGetters } from 'vuex'

export default {
  name: 'interviewInfos',
  data() {
    return {
      // 遮罩层
      loading: true,
      currentPage: 1, // 当前页面
      total: 0, // 总条数
      pageNum: 1, // 当前页面
      pageSize: 5, // 每页大小
      InfoList: [], //所有面试记录
      dialogName: '详情',
      infos: {
        name: '',
        age: '',
        sex: '',
        address: '',
        post: '',
        time: '',
        description: '',
        suggestSalary: '',
        state: '',
        salary: '',
        opinion: ''
      },
      addOrEditDialog: false, //新增窗口开关
      EditOrLookDialog: false, //编辑和查看窗口
      title: '面试信息'
    }
  },
  methods: {
    /** 查询单位列表 */
    fetchData() {
      //组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getInfo(params).then(res => {
        if (res.code == 20000) {
          this.loading = false
          this.InfoList = res.data.list
          this.pageNum = res.data.pageNum
          this.total = res.data.total
        } else {
          this.$message({
            type: 'error',
            message: '查询失败',
            duration: 1000
          })
        }
      })
    },
    handleSizeChange(val) {
      // 处理页面大小改变时触发
      this.loading = true
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      // 当前页码改变时触发
      this.loading = true
      this.pageNum = val
      this.fetchData()
    },
    //打开新增对话框
    openAddDialog() {
      this.addOrEditDialog = true

    },
    //打开修改或查看对话框
    handleCaozuo(row) {
      this.EditOrLookDialog = true
      this.infos = row //数据回显
    },

    // 提交
    submitMeasure() {
      this.loading = true
      this.infos.state = '1' //人事编写状态
      addInfo(this.infos).then((res) => {
        if (res.code == 20000) {
          this.$message({
            type: 'success',
            message: '提交成功',
            duration: 1000
          })
          this.fetchData()
          this.addOrEditDialog = false
          this.infos = {}
        } else {
          this.$message({
            type: 'error',
            message: '提交失败',
            duration: 1000
          })
        }
      })
    },
    // 不通过
    submitMeasure2() {
      //不通过
      this.loading = true
      this.infos.state = 3
      updateInfo(this.infos).then((res) => {
        if (res.code == 20000) {
          this.$message({
            type: 'success',
            message: '已设置未通过',
            duration: 1000
          })
          this.fetchData()
          this.EditOrLookDialog = false
          this.infos = {}
        } else {
          this.$message({
            type: 'error',
            message: '设置失败',
            duration: 1000
          })
        }
      })

    },

    // 修改提交
    submitMeasure3() {
      this.loading = true
      this.infos.state = '1' //人事编写状态
      updateInfo(this.infos).then((res) => {
        if (res.code == 20000) {
          this.$message({
            type: 'success',
            message: '提交成功',
            duration: 1000
          })
          this.fetchData()
          this.EditOrLookDialog = false
          this.infos = {}
        } else {
          this.$message({
            type: 'error',
            message: '提交失败',
            duration: 1000
          })
        }
      })
    },

    //删除信息
    handleDelete(row) {
      this.$confirm('确认删除姓名为["' + row.name + '"]的面试信息?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        delInfo({ name: row.name }).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 1000
            })
            this.fetchData()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败',
              duration: 1000
            })
          }
        })
      })
    },

    //取消对话框
    cancelAddMeasure(formName) {
      this.$refs[formName].resetFields()
      this.infos = {}
      this.loading = true
      this.fetchData()
      this.addOrEditDialog = false
      this.EditOrLookDialog = false
    },

    //增加对话框点击保存
    saveAddMeasure() {
      this.loading = true
      this.infos.state = '0' //人事编写状态
      addInfo(this.infos).then((res) => {
        if (res.code == 20000) {
          this.$message({
            type: 'success',
            message: '保存成功',
            duration: 1000
          })
          this.fetchData()
          this.addOrEditDialog = false
          this.infos = {}
        } else {
          this.$message({
            type: 'error',
            message: '保存失败',
            duration: 1000
          })
        }
      })
    },

    //修改对话框点击保存
    saveAddMeasure3() {
      this.loading = true
      this.infos.state = '0' //人事编写状态
      updateInfo(this.infos).then((res) => {
        if (res.code == 20000) {
          this.$message({
            type: 'success',
            message: '保存成功',
            duration: 1000
          })
          this.fetchData()
          this.addOrEditDialog = false
          this.infos = {}
        } else {
          this.$message({
            type: 'error',
            message: '保存失败',
            duration: 1000
          })
        }
      })
    },

    //对话框通过
    saveAddMeasure2() {
      //通过
      this.loading = true
      this.infos.state = 2
      updateInfo(this.infos).then((res) => {
        if (res.code == 20000) {
          this.$message({
            type: 'success',
            message: '已通过',
            duration: 1000
          })
          this.fetchData()
          this.EditOrLookDialog = false
          this.infos = {}
        } else {
          this.$message({
            type: 'error',
            message: '通过失败',
            duration: 1000
          })
        }
      })

    },

    //导出
    Export() {
      //获得数据
      let list = this.InfoList
      //表格表头,导出表头
      let tableHeader = [['姓名', '性别', '年龄', '地址', '面试岗位', '面试时间', '描述',
        '建议薪资', '审批状态']]
      list.forEach((item) => {
        let rowData = []
        //导出内容的字段
        rowData = [
          item.name,
          item.sex,
          item.age,
          item.address,
          item.post,
          item.time,
          item.description,
          item.suggestSalary,
          item.state
        ]
        tableHeader.push(rowData)
      })
      // 因为配置了全局,所以可以用this.$直接调用,不需要导入
      let wb = this.$XLSX.utils.book_new()
      let ws = this.$XLSX.utils.aoa_to_sheet(tableHeader)
      this.$XLSX.utils.book_append_sheet(wb, ws, this.title) // 工作簿名称
      this.$XLSX.writeFile(wb, this.title + '.xlsx') // 保存的文件名

    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.fetchData()
  }
}

</script>
<style scoped>
.cao {
  margin-left: 20px;
  margin-top: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
